<template>
	<uv-tabbar :value="tabActive" @change="tabChange" :border="false"
		customStyle="border-top-right-radius:20px;border-top-left-radius:20px;box-shadow: 0rpx -1rpx 7rpx 0rpx rgba(0,0,0,0.05);">
		<template v-for="(item, index) in tabbarList">
			<!--  v-if="index < 3" -->
			<uv-tabbar-item :text="item.name" :name="index" :key="index"
				:badge="index == 3 ? userInfo.unread_message_number : 0"
				:icon="tabActive == index ? item.iconSelect : item.icon"></uv-tabbar-item>
			<!-- <uv-tabbar-item v-if="index == 3 && (data.userInfo.position_id == 12 || data.userInfo.position_id == undefined)" :name="index">
	      <template v-slot:active-icon>
	        <view class="add-box">
	          <view class="iconfont icon-tianjia"></view>
	        </view>
	      </template>
	      <template v-slot:inactive-icon>
	        <view class="add-box">
	          <view class="iconfont icon-tianjia"></view>
	        </view>
	      </template>
	    </uv-tabbar-item>
	    <uv-tabbar-item v-if="index == 4 && [10, 1, 2, 6, 7].includes(data.userInfo.position_id)" :text="item.name"
	      :name="index" :icon="currentPageRoute == item.path ? item.iconSelect : item.icon">
	    </uv-tabbar-item> -->
		</template>
	</uv-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				tabbarList: [{
						name: '首页',
						icon: '/static/image/home.png',
						iconSelect: '/static/image/home-select.png',
						path: 'pages/index/index'
					},
					{
						name: '项目',
						icon: '/static/image/xm.png',
						iconSelect: '/static/image/xm-select.png',
						path: 'pages/project/project'
					},
					{
						name: '报修',
						icon: '/static/image/bx.png',
						iconSelect: '/static/image/bx-select.png',
						path: 'pages/repair/repair'
					},
					{
						name: '通知',
						icon: '/static/image/tz.png',
						iconSelect: '/static/image/tz-select.png',
						path: 'pages/message/message'
					},
					{
						name: '个人中心',
						icon: '/static/image/grzx.png',
						iconSelect: '/static/image/grzx_2.png',
						path: 'pages/user_home/user_home'
					}
				],
				tabActive: 0
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo');
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			let index = this.tabbarList.findIndex((item) => {
				return item.path == page.route;
			});
			this.tabActive = index;
		},
		methods: {
			getUserInfo() {
				let userInfo = uni.getStorageSync('userInfo');
				this.userInfo = userInfo
				if (userInfo.empower == 0 || !userInfo) {
					return;
				}
				this.$Api.getMessageList({
					is_read: 0,
					msg_type: 0,
					page: 1,
					num: 1
				}).then((res) => {
					console.log(res, '消息列表');
					if (res.code == 200) {
						userInfo.unread_message_number = res.data.unread_message_number;
						uni.setStorageSync('userInfo', userInfo);
						this.userInfo.unread_message_number = res.data.unread_message_number;
					}
				})
			},
			tabChange(e) {
				if (!this.tabbarList[e].path) return;
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo.empower == 0 || !userInfo) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}
				console.log(this.tabbarList, e);
				if (!this.tabbarList[e].iconSelect) {
					uni.navigateTo({
						url: '/' + this.tabbarList[e].path
					});
					return;
				}
				uni.switchTab({
					url: '/' + this.tabbarList[e].path
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon {
		width: 36rpx;
		height: 36rpx;
	}

	.add-box {
		width: 70rpx;
		height: 70rpx;
		background: #3b75ff;
		box-shadow: 0rpx 5rpx 19rpx 0rpx rgba(38, 85, 197, 0.26);
		border-radius: 50%;
		color: #fff;
		font-size: 65rpx;
		line-height: 70rpx;
		text-align: center;

		.icon-tianjia {
			font-size: 32rpx;
			font-weight: bolder;
		}
	}
</style>